<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">

					菜单管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 100px;">
						<div class="input-group-btn">

							<button type="button"
									class="btn btn-success btn-delete">
								删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table id="menuTable" class="table table-hover">
					<thead>
					<tr>
						<th data-field="selectItem" data-checkbox="true"></th>
					</tr>
					</thead>

				</table>
			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">
	/**
	 * 初始化表格的列
	 */
	var columns = [
		{
			field : 'selectItem',
			radio : true
		},
		{
			title : '菜单ID',
			field : 'id',
			align : 'center',
			valign : 'middle',
			width : '80px'
		},
		{
			title : '菜单名称',
			field : 'name',
			align : 'center',
			valign : 'middle',
			width : '130px'
		},
		{
			title : '上级菜单',
			field : 'parentName',
			align : 'center',
			valign : 'middle',
			sortable : true,
			width : '100px'
		},
		{
			title : '类型',
			field : 'type',
			align : 'center',
			valign : 'middle',
			sortable : true,
			width : '70px',
			formatter : function(item, index) {
				if (item.type == 1) {
					return '<span class="label label-success">菜单</span>';
				}
				if (item.type == 2) {
					return '<span class="label label-warning">按钮</span>';
				}
			}
		},
		{
			title : '排序号',
			field : 'sort',
			align : 'center',
			valign : 'middle',
			sortable : true,
			width : '70px'
		},
		{
			title : '菜单URL',
			field : 'url',
			align : 'center',
			valign : 'middle',
			sortable : false,
			width : '160px'
		},
		{
			title : '授权标识',//要显示的标题名称
			field : 'permission',//json串中的key
			align : 'center',//水平居中
			valign : 'middle',//垂直居中
			sortable : false //是否排序
		} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
	//异步加载
	$(function(){
		doGetObjects();
		//按钮事件注册
		$(".input-group-btn")
				.on("click",".btn-delete",doDeleteObject)
				.on("click",".btn-add,.btn-update",doLoadEditUI);
	})
	function doLoadEditUI(){
		//定义标题
		var title;
		//hasClass()方法检测被点击元素是否包含指定的
		if($(this).hasClass("btn-add")){
			title="添加菜单信息";
		}else{
			title="修改菜单信息";
			//获取选中的当前行的记录(从tr对象上获取)
			var rowData=doGetCheckedItem();
			console.log("rowData",rowData);
			if(!rowData){
				alert("请先选一个");
				return;
			}
			//重新绑定数据到#mainContentId
			$("#mainContentId").data("rowData",rowData);
		}
		//2.异步加载编辑页面
		var url="menu/menu_edit";
		$("#mainContentId").load(url,function (){
			$(".box-title").html(title);
		});
	}
	//获取tr对象上绑定的数据
	function doGetCheckedItem(){
		//找到当前选中的单选框的所有父级tr标签
		var tr=$("tbody input[type='radio']:checked").parents("tr");
		if(tr)return tr.data("rowData");
	}
	//获取选中记录的id值
	function doGetCheckedId(){
		//1.获取选中的记录
		//bootstrapTreeTable是treeGrid插件内部定义的jQuery扩展函数
		//getSelections为扩展函数内部要调用的一个方法
		var selections=$("#menuTable")
				.bootstrapTreeTable("getSelections");
		//2.对记录进行判定
		//console.log(selections);
		if(selections.length==1)
			return selections[0].id;
	}
	//执行删除操作
	function doDeleteObject(){
		//1.获取选中的记录的id，并进行判断
		var id=doGetCheckedId();
		if(!id){
			alert("请先选中");
			return;
		}
		if(!confirm("确定删除吗？"))return;
		//2.请求参数
		var params={"id":id};
		//3.请求url
		var url="menu/doDeleteObject";
		//4.发送异步请求执行删除操作
		$.post(url,params,function(result){
			if(result.state==1){
				alert(result.message);
				//重新刷新页面
				doGetObjects();
			}else{
				alert(result.message);
			}
		})
	}
	//定义页面数据加载方法
	function doGetObjects(){
		$("#mainContentId").removeData();
		//构建table对象(bootstrap框架中treeGrid插件)
		var treeTable=new TreeTable(
				"menuTable",
				"menu/doFindObjects",
				columns
		);
		treeTable.init();
	}

</script>
